<template>
    <!--分栏布局 -->
    <div
        :class="{
      fixed: fixedHeader,
      'no-tabs-bar': !showTabs,
    }"
        class="vab-layout-column"
    >
        <column-bar/>
        <div
            :class="{
        ['vab-main-' + theme.columnStyle]: true,
        'is-collapse-main': collapse,
      }"
            class="vab-main"
        >
            <div
                :class="{
          'fixed-header': fixedHeader,
        }"
                class="vab-layout-header"
            >
                <vab-nav/>
                <vab-tabs v-show="showTabs"/>
            </div>
            <vab-app-main/>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import {Component, Prop} from 'vue-property-decorator';
    import {SettingsGetterEnum} from '@/store/enum/store.enum';
    import VabAppMain from '@/vab/components/VabAppMain/index.vue';
    import VabNav from '@/vab/components/VabNav/index.vue';
    import VabTabs from '@/vab/components/VabTabs/index.vue';
    import ColumnBar from './components/ColumnBar.vue';

    @Component({components: {VabAppMain, VabNav, VabTabs, ColumnBar}})
    export default class VabLayoutColumn extends Vue {
        @Prop({type: Boolean, default: false})
        private collapse;

        @Prop({type: Boolean, default: true})
        private fixedHeader;

        @Prop({type: Boolean, default: true})
        private showTabs;

        get theme() {
            return this.$store.getters[SettingsGetterEnum.theme]
        };

    }
</script>

<style lang="scss" scoped>
    .vab-layout-column {
        .vab-main {
            .fixed-header {
                left: $base-left-menu-width;
                width: $base-right-content-width;
            }

            &.is-collapse-main {
                &.vab-main-horizontal {
                    margin-left: $base-left-menu-width-min * 1.3;

                    ::v-deep {
                        .fixed-header {
                            left: $base-left-menu-width-min * 1.3;
                            width: calc(100% - #{$base-left-menu-width-min} * 1.3);
                        }
                    }
                }
            }
        }
    }
</style>
